<template lang="">
    <div>
        <li>
            <label>
                <input type="checkbox" :checked="todo.done" @change="handleCheck(todo.id)">
                <!-- 
                    不推荐用v-model。因为修改了props,有点违背了原则
                    <input type="checkbox" v-model="todo.done"> 
                -->
                <span>{{todo.title}}</span>
            </label>
            <button class="btn btn-danger" @click="handleDelete(todo.id)">删除</button>
        </li>
    </div>
</template>
<script>
export default {
    name:"MyItem",
    props:['todo','checkTodo','deteleTodo'],
    methods: {
        handleCheck(id){
            console.log(id)
            // 通知App组件将id对应的todo对象的done取反
            this.checkTodo(id)
        },
        handleDelete(id){
            console.log(id)
            if(confirm('确定删除吗？')){
                this.deteleTodo(id)
            }
        }
    },
    // props:['todo'],
}
</script>
<style lang="less">
    li button{
        float: left;
        display: none;
        margin-top: 3px;
    }
    li:before{
        content: initial;
    }
    li:last-child{
        border-bottom: none;
    }
    li:hover{
        background-color: #ddd;
    }
    li:hover button{
        display: block;
    }
</style>